<div class="row">
    <div class="col-sm-8 col-md-6">
        <table class="table table-borderless table-striped">
            <tr>
                <td>{{'org_unit' | translate}}</td>
                <td>
                    <input type="text" class="form-control" value="{{selectedOrgUnit.displayName|| 'please_select'| translate}}" ng-disabled="true">                                                                                        
                </td>
            </tr>
            <tr>
                <td class='col-sm-4 col-md-3 vertical-center'>
                    {{'program'| translate}}
                </td>
                <td class='col-sm-4 col-md-3'>
                    <ui-select ng-model="model.selectedProgram" 
                            theme="select2" style="width:100%;">
                        <ui-select-match allow-clear="true" class="form-control-ui-select" placeholder="{{'select_or_search' | translate}}">{{$select.selected.displayName  || $select.selected}}</ui-select-match>
                        <ui-select-choices  repeat="program in programs | filter:{displayName:$select.search} | limitTo:maxOptionSize">
                            <span ng-bind-html="program.displayName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                </td>
            </tr>            
            <tr>
                <td class='col-sm-4 col-md-3 vertical-center'>{{'org_unit_scope'| translate}}</td>
                <td class='col-sm-4 col-md-3'>                 
                    <label><input type="radio" ng-model="selectedOuMode.name" name="selected" value="SELECTED"> {{'SELECTED'| translate}}</label><br/>
                    <label><input type="radio" ng-model="selectedOuMode.name" name="children" value="CHILDREN"> {{'CHILDREN'| translate}}</label><br/>
                    <label><input type="radio" ng-model="selectedOuMode.name" name="descendants" value="DESCENDANTS"> {{'DESCENDANTS'| translate}}</label><br/>
                </td>
            </tr>            
        </table>
    </div>
</div>
<div class="row">
    <div class="col-sm-8 col-md-6">
        <table class="table-borderless">
            <tr>
                <td>
                    <input type="text" 
                           name="reportStartDate" 
                           placeholder="{{'start_date'| translate}} ({{dhis2CalendarFormat.keyDateFormat}})" 
                           class="form-control" 
                           d2-date 
                           ng-model="report.startDate" 
                           max-date="0"
                           ng-required="true"/> 
                    <span ng-show="outerForm.submitted && outerForm.reportStartDate.$invalid" style="color:red;font-size:12px">{{'required'| translate}} ({{dhis2CalendarFormat.keyDateFormat}})</span>
                </td>
                <td>
                    <input type="text" 
                           name="reportEndDate" 
                           placeholder="{{'end_date'| translate}} ({{dhis2CalendarFormat.keyDateFormat}})" 
                           class="form-control" 
                           d2-date 
                           ng-model="report.endDate" 
                           max-date="0" 
                           ng-required="true"/>
                    <span ng-show="outerForm.submitted && outerForm.reportEndDate.$invalid" style="color:red;font-size:12px">{{'required'| translate}} ({{dhis2CalendarFormat.keyDateFormat}})</span>
                </td>
            </tr>
        </table>                
    </div>
    <div class="col-md-6 trim">
        <button type="button" class="btn btn-primary" ng-click="generateReport(model.selectedProgram, report, selectedOuMode)" ng-disabled="!model.selectedProgram">{{'go'| translate}}</button>               
    </div>
</div>

<div class="row" ng-if="programs.length < 1">        
    <div class="col-sm-8 col-md-6 vertical-spacing">
        <div class="alert alert-warning">{{'no_program_exists_report'| translate}}</div> 
    </div>
</div>
<div class="row" ng-if="programs.length > 0 && !model.selectedProgram">        
    <div class="col-sm-8 col-md-6 vertical-spacing">
        <div class="alert alert-warning">{{'please_select_program_report'| translate}}</div> 
    </div>
</div>